<template>
	<div class="draw">
		<header>
			<div class="toolbar"><em></em></div>
			<div class="banner">
				<template v-if="openState">
					<div class="btn_area">
						<a href="javascript:;" class="btn_share1" @click="mainShare()"><em></em>分享活动</a>
					</div>
				</template>
				<template v-else>
					<div class="btn_area">
						<!--未开通-->
						<a href="javascript:;" class="btn_share" @click="mainShare()"><em></em>分享活动</a>
						<a href="javascript:;" class="btn_open" @click="openright()"><em></em>立即开通</a>
					</div>
				</template>
				<p class="time">06月19日-08月31日</p>
			</div>
		</header>
		<section>
			<div class="jfmsg">
				<div class="jf"><em></em>我的积分:<i>{{integral}}</i></div>
				<div class="cj_num"><em></em>我的抽奖次数:<i>{{award_num}}</i></div>
			</div>
			<div class="broadcast">
				<em></em>
				<template v-if="carousel.length">
					<p v-for="(item,index) in carousel" v-show="index==cur_carousel">{{item}}</p>
				</template>
				<template v-else>
					<p>暂无抽奖记录</p>
				</template>
			</div>
			<div class="draw-wrap">
				<div :class="gift.className" class="draw-item" v-for="gift in giftList">
					<em></em>
					<p>{{gift.name}}</p>
				</div>
				<span class="im-draw" @click="imDraw()" v-html="im_draw"></span>
				<em id="endpointer" :class="['pointer',{'pointers':startDraw,'endpointer':endDraw}]"></em>
			</div>
			<div class="prize">
				<div class="top"></div>
				<div class="context">
					<div class="title"><i>我的奖品</i></div>
					<div class="detail">
						<template v-if="winrecord.length">
							<p v-for="item in winrecord">您于 {{item[0]}} 获得 <i>{{item[1]}}</i></p>
						</template>
						<template v-else>
							<p class="nomsg">暂无中奖纪录</p>
						</template>
					</div>
					<div class="lf corner"></div>
					<div class="rgt corner"></div>
				</div>
			</div>
		</section>
		<!--遮罩-->
		<div class="prize_result" v-show="showmask">
			<div class="mask"></div>
			<div class="get" v-show="showget"><em @click="closeMask()"></em><label>获得{{cur_gift}}一个</label></div>
			<div class="not" v-show="shownot"><em @click="closeMask()"></em><label>您本次未抽中任何奖品</label></div>
		</div>
	</div>
</template>
<script type="text/ecmascript-6">
	export default {
		data() {
			return {
				openstate: this.$store.state.opendate,
				showmask: false,
				showget: false,
				shownot: false,
				status: 1,
				carousel: [], //中奖名单
				cur_carousel: 0, //当前显示的中奖名单下标
				winrecord: [], //我的中奖记录
				integral: 0, //积分
				num: 0,
				flag: true, //抽奖按钮开关
				subject: false,
				im_draw: '立即<br/>抽奖',
				giftList: [{
						name: '平板电脑',
						className: 'slab'
					},
					{
						name: '宝视达护眼灯',
						className: 'box'
					},
					{
						name: '美琪娃娃',
						className: 'bag'
					},
					{
						name: '卡通水笔组合',
						className: 'free'
					},
					{
						name: '谢谢参与',
						className: 'smilingface'
					}
				],
				cur_gift: '', //当前奖品
				startDraw: false,
				endDraw: true,
				award_num: 0 //抽奖次数
			}
		},
		computed: {
			openState() {
				return this.openstate ? true : false;
			}
		},
		created() {
			this.$store.commit('hiderank');
			this.$store.commit('showbonus');
			this.$store.commit('hideact');
			this.carouselLoop(); //中奖名单滚动展示
			this.initCarousel();
		},
		methods: {
			openright() {
				location.href = comweb + '/open/2/code?tbkt_token=' + this.$store.state.token;
			},
			closeMask() {
				this.showmask = false;
			},
			imDraw() {
				if(!this.flag) return;
				this.flag = false;
				if(this.integral >= 500) {
					this.$http.post(mapihd + '/huodong/sx_summer/s/award', {
						'app_id': 43
					}).then((res) => {
						this.flag = true;
						res = res.body;
						if(res.response == 'ok') {
							var num = res.data.award;
							if(num == 0) {
								layer.tips('活动未开始！敬请期待！');
							} else{
								num--;
								if(typeof num == 'number') {
									this.im_draw = '抽奖<br/>中...';
									this.endDraw = false;
									this.startDraw = true;
									this.integral -= 500;
									this.award_num--;
									this.num--;
									setTimeout(() => {
										let ary = [{
												top: '4.675rem',
												left: '8.65rem',
												rotate: '360deg'
											},
											{
												top: '6.4rem',
												left: '10.75rem',
												rotate: '72deg'
											},
											{
												top: '8.7rem',
												left: '10rem',
												rotate: '144deg'
											},
											{
												top: '8.8rem',
												left: '7.3rem',
												rotate: '216deg'
											},
											{
												top: '6.3rem',
												left: '6.5rem',
												rotate: '288deg'
											}
										];
										this.startDraw = false;
										let ele = document.getElementById('endpointer');
										ele.style.top = ary[num].top;
										ele.style.left = ary[num].left;
										ele.style.transform = 'rotate(' + ary[num].rotate + ')';
										setTimeout(() => {
											this.openMark(num);
										}, 500);
										let type = num == 4 ? 0 : 1;
									}, 3000);
								} else {
									
								}
							}
						}
					});
				} else {
					this.flag = true;
					this.openMark();
				}
			},
			initCarousel() {
				this.$nextTick(() => {
					this.$http.get(domain + '/API/SummerAct/GetScore', {
						params: {
							'intUserID': this.$store.state.stu_id,
							'userType': 0
						}
					}).then(res => {
						this.integral = res.body.score; //积分
						this.award_num = res.body.num; //抽奖次数
					})
				});
				this.$http.post(mapihd + '/huodong/sx_summer/s/award/detail', {
					'app_id': 43
				}).then(res => {
					let dt = res.body;
					if(dt.response == 'ok') {
						let rl = dt.data.my_award;
						let pl = dt.data.all_award;
						this.carousel.splice(0, this.carousel.length,...pl); //中奖名单
						this.winrecord.splice(0, this.winrecord.length,...rl); //我的中奖纪录
					}
				});
			},
			openMark(i) {
				if(i || i == 0) {
					this.showmask = true;
					this.im_draw = '立即<br/>抽奖';
					if(i != 4) {
						this.showget = true;
						this.shownot = false;
						this.cur_gift = this.giftList[i].name;
						let newAward=[];
						newAward.push(new Date().Format('yyyy-MM-dd mm:hh:ss'));
						newAward.push(this.giftList[i].name);
						this.winrecord.splice(0,0,newAward);
					} else {
						this.showget = false;
						this.shownot = true;
					}
				} else {
					layer.alert('很遗憾,您的积分不够了');
				}
			},
			carouselLoop() {
				//中奖名单滚动显示
				let that = this;
				setInterval(function() {
					if(that.cur_carousel < that.carousel.length - 1) {
						that.cur_carousel++
					} else {
						that.cur_carousel = 0;
					}
				}, 2000)
			},
			mainShare() {
				var _url = "http://www.tbkt.cn/yd_login/?wap=1%20?location=0";
				var title='';
				this.$http.post(mapihd + '/huodong/sx_summer/s/award/detail', {
					'app_id': 43
				}).then(res => {
					let dt = res.body;
					if(dt.response == 'ok') {
						let rl = dt.data.my_award;
						let pl = dt.data.all_award;
						let rl_text=rl[rl.length-1][1];
						if(rl.length>0){
							title="太棒了，我在同步课堂 '暑假作业大作战！'活动中抽中了"+rl_text+"大奖，你也来试试？http://www.tbkt.cn/yd_login/?wap=1%20?location=0"
						}else{
							title='缤纷暑假赢大奖，ipad壕礼抽不停！快来参加同步课堂暑假活动吧。http://www.tbkt.cn/yd_login/?wap=1%20?location=0'					
						}
					}
				});
				try {
					appobject.Interactive("ys_share," + _url + "|" + title);
				} catch(e) {
					layer.tips('PC端不支持此功能');
					return;
				}
				this.$http.get(domain + '/API/SummerAct/ShareRecord', {
					params: {
						'intStuID': this.$store.state.stu_id,
						'strStuName':this.$store.state.stu_name,
						'intClassID':this.$store.state.class_id,
						'strOpenDate':this.$store.state.opendate,
						'strShareTime':new Date().Format('yyyy-MM-dd hh:mm:ss'),
						'intSID': this.$store.state.school_id,
						'strSName': this.$store.state.school_name,
						'intcityID': this.$store.state.city_id
					}
				}).then(res => {
					let stumsg = res.body[0];
					if(stumsg == true) {
						layer.tips("分享成功，获得100积分")
					} else {
						layer.tips("分享成功")
					}
				})

			}
		}
	};
</script>
<style id="drawCss" rel="stylesheet/scss" lang="scss" scoped>
	@import "../../assets/scss/common";
	.toolbar {
		width: 100%;
		height: 93px/$ppr;
		background: url(img/toolbar_bg.png) no-repeat center;
		background-size: 100% 93px/$ppr;
		position: relative;
		em {
			width: 64px/$ppr;
			height: 64px/$ppr;
			display: block;
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			left: 21px/$ppr;
			background: url(img/b_back.png) no-repeat center;
			background-size: 64px/$ppr 64px/$ppr;
		}
	}
	
	section {
		background: #6cd7f2;
		min-height: 550px/$ppr;
		padding-bottom: 200px/$ppr;
		.jfmsg {
			width: 100%;
			height: 288px/$ppr;
			background: url(img/bg1.png) no-repeat center;
			background-size: 100% 288px/$ppr;
			position: relative;
			div {
				width: 50%;
				position: absolute;
				bottom: 0;
				box-sizing: border-box;
				color: #fff;
				font-size: 30px/$ppr;
				font-weight: bold;
				text-align: center;
				overflow: hidden;
				i {
					font-style: normal;
					font-size: 36px/$ppr;
					color: #298ccb;
					margin-left: 10px/$ppr;
					
				}
				em {
					display: inline-block;
					width: 48px/$ppr;
					height: 48px/$ppr;
					vertical-align: middle;
					margin-right: 10px/$ppr;
				}
			}
			.jf {
				left: 0;
				/*padding-left: 40px/$ppr;*/
				em {
					background: url(img/icon1.png) no-repeat center;
					background-size: 48px/$ppr 48px/$ppr;
				}
			}
			.cj_num {
				left: 50%;
				em {
					background: url(img/icon2.png) no-repeat center;
					background-size: 48px/$ppr 48px/$ppr;
				}
			}
		}
		.broadcast {
			width: 672px/$ppr;
			height: 64px/$ppr;
			background: #0fb3dd;
			color: #fff;
			font-size: 24px/$ppr;
			border-radius: 20px/$ppr;
			margin: 60px/$ppr auto 25px/$ppr;
			padding-left: 74px/$ppr;
			box-sizing: border-box;
			position: relative;
			line-height: 64px/$ppr;
			font-weight: bold;
			overflow: hidden;
			em {
				position: absolute;
				left: 10px/$ppr;
				top: 50%;
				transform: translateY(-50%);
				display: inline-block;
				width: 52px/$ppr;
				height: 37px/$ppr;
				background: url(img/icon_tip.png) no-repeat center;
				background-size: 52px/$ppr 37px/$ppr;
				line-height: 64px/$ppr;
				vertical-align: middle;
				margin-right: 10px/$ppr;
			}
		}
		.draw-wrap {
			position: relative;
			text-align: center;
			margin: 0 auto;
			width: 100%;
			height: 714px/$ppr;
			box-sizing: border-box;
			background: url("img/dial.png") no-repeat;
			background-size: 100%;
			.pointer {
				position: absolute;
				display: block;
				width: 42px/$ppr;
				height: 48px/$ppr;
				background: url("img/pointer.png") no-repeat;
				background-size: 100%;
			}
			.endpointer {
				top: 187px/$ppr;
				left: 346px/$ppr;
			}
			.im-draw {
				position: absolute;
				top: 270px/$ppr;
				left: 332px/$ppr;
				display: inline-block;
				font-size: 35px/$ppr;
				color: #fff;
			}
			.draw-item {
				position: absolute;
				em {
					display: inline-block;
					text-align: center;
				}
				p {
					margin-top: 5px/$ppr;
					font-size: 28px/$ppr;
					color: #fff;
				}
			}
			.slab {
				top: 84px/$ppr;
				left: 290px/$ppr;
				em {
					width: 132px/$ppr;
					height: 66px/$ppr;
					background: url("img/iPad.png");
					background-size: 100% 100%;
				}
			}
			.box {
				width: 130px/$ppr;
				top: 190px/$ppr;
				left: 450px/$ppr;
				em {
					width: 88px/$ppr;
					height: 66px/$ppr;
					background: url("img/yanjingdeng.png");
					background-size: 100% 100%;
				}
			}
			.bag {
				width: 140px/$ppr;
				top: 365px/$ppr;
				left: 400px/$ppr;
				em {
					width: 130px/$ppr;
					height: 56px/$ppr;
					background: url("img/meiqi.png");
					background-size: 100% 100%;
				}
			}
			.free {
				width: 160px/$ppr;
				top: 370px/$ppr;
				left: 190px/$ppr;
				em {
					width: 130px/$ppr;
					height: 52px/$ppr;
					background: url("img/shuibi.png");
					background-size: 100% 100%;
				}
			}
			.smilingface {
				top: 209px/$ppr;
				left: 160px/$ppr;
				em {
					width: 52px/$ppr;
					height: 52px/$ppr;
					background: url("img/smilingface.png");
					background-size: 100%;
				}
			}
		}
		.prize {
			margin: 37px/$ppr auto;
			width: 675px/$ppr;
			min-height: 450px/$ppr;
			.top {
				width: 673px/$ppr;
				height: 21px/$ppr;
				background: #0fb3dd;
				border-radius: 20px/$ppr;
			}
			.context {
				width: 638px/$ppr;
				min-height: 440px/$ppr;
				background: #fff;
				margin: -11px/$ppr auto 0;
				position: relative;
				.title {
					width: 618px/$ppr;
					height: 86px/$ppr;
					background: url('img/prize_bg.png');
					background-size: 100%;
					i {
						font-style: normal;
						font-size: 30px/$ppr;
						color: #a66f00;
						font-weight: bold;
						width: 193px/$ppr;
						height: 48px/$ppr;
						line-height: 48px/$ppr;
						text-align: center;
						display: inline-block;
						margin: 35px/$ppr 0 0 260px/$ppr;
					}
				}
				.detail {
					width: 100%;
					padding: 20px/$ppr 20px/$ppr 30px/$ppr;
					box-sizing: border-box;
					p {
						height: 80px/$ppr;
						line-height: 80px/$ppr;
						border-bottom: 1px solid #dbdbdb;
						font-size: 24px/$ppr;
						color: #333333;
						i {
							font-style: normal;
							color: #ff6d1a;
						}
					}
				}
				.corner {
					position: absolute;
					bottom: -0.525rem;
					width: 56px/$ppr;
					height: 40px/$ppr;
					border-radius: 249.975rem;
					background: #6cd7f2;
				}
				.lf {
					left: -28px/$ppr;
				}
				.rgt {
					right: -28px/$ppr;
				}
			}
		}
	}
	
	.prize_result {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 11;
		.mask {
			width: 100%;
			height: 100%;
			background: #000;
			opacity: 0.5;
			filter: alpha(opacity=50);
		}
		.get {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translateX(-50%) translateY(-50%);
			z-index: 12;
			width: 516px/$ppr;
			height: 405px/$ppr;
			background: url(img/prize_get.png);
			background-size: 100%;
			em {
				width: 24px/$ppr;
				height: 23px/$ppr;
				background: url(img/close.png);
				background-size: 100%;
				position: absolute;
				right: 83px/$ppr;
				top: 155px/$ppr;
				display: block;
			}
			label {
				position: absolute;
				width: 80%;
				text-align: center;
				font-size: 36px/$ppr;
				color: #333;
				bottom: 85px/$ppr;
				left: 46%;
				transform: translateX(-50%);
				bottom: 60px/$ppr;
				line-height: 60px/$ppr;
			}
		}
		.not {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translateX(-50%) translateY(-50%);
			z-index: 12;
			width: 478px/$ppr;
			height: 348px/$ppr;
			background: url(img/prize_not.png);
			background-size: 100%;
			em {
				width: 24px/$ppr;
				height: 23px/$ppr;
				background: url(img/close.png);
				background-size: 100%;
				position: absolute;
				right: 40px/$ppr;
				top: 100px/$ppr;
				display: block;
			}
			label {
				position: absolute;
				width: 100%;
				text-align: center;
				font-size: 36px/$ppr;
				color: #333;
				bottom: 85px/$ppr;
				left: 0;
			}
		}
	}
	
	.pointers {
		animation: rotate .4s ease-in-out infinite;
		@include keyframes(rotate) {
			0% {
				top: 187px/$ppr;
				left: 346px/$ppr;
				transform: rotate(0deg)
			}
			10% {
				top: 204px/$ppr;
				left: 382px/$ppr;
				transform: rotate(36deg)
			}
			20% {
				top: 259px/$ppr;
				left: 419px/$ppr;
				transform: rotate(72deg)
			}
			30% {
				top: 296px/$ppr;
				left: 418px/$ppr;
				transform: rotate(108deg)
			}
			40% {
				top: 334px/$ppr;
				left: 384px/$ppr;
				transform: rotate(144deg)
			}
			50% {
				top: 361px/$ppr;
				left: 342px/$ppr;
				transform: rotate(180deg)
			}
			60% {
				top: 335px/$ppr;
				left: 292px/$ppr;
				transform: rotate(216deg)
			}
			70% {
				top: 294px/$ppr;
				left: 254px/$ppr;
				transform: rotate(252deg)
			}
			80% {
				top: 255px/$ppr;
				left: 252px/$ppr;
				transform: rotate(288deg)
			}
			90% {
				top: 200px/$ppr;
				left: 295px/$ppr;
				transform: rotate(324deg)
			}
			100% {
				top: 187px/$ppr;
				left: 346px/$ppr;
				transform: rotate(360deg)
			}
		}
	}
	
	.nomsg {
		font-size: 30px/$ppr;
		color: #555;
		text-align: center;
		margin-top: 20%;
		border-bottom: none !important;
	}
</style>